<!DOCTYPE html>
<!-- saved from url=(0028)http://www.intable.net/demo/ -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>体验店招募</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/autosize.js"></script>
</head>

<body>
    <div class="code">
        <div class="title">体验店招募</div>
        <!-- <form action="http://www.intable.net/demo/xxxxxxx.php" method="post"> -->
        <div class="content">
            <div class="intable">
                <div class="pick zong">
                    <!-- <input type="checkbox" ck="1" checked="checked">
 -->
                    <i class="fa fa-check" aria-hidden="true"></i>
                </div>
                <span>intable 志</span>
            </div>
            <div class="box">
                <div class="base">
                    <div class="list">
                        <div class="pick" pick="none">
                            <input style="display: none" type="checkbox" ck="1" pick='pick' checked="checked">
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        <div style="background-image: url(./icon/icon1.png)" class="tit">
                            <span>基本植入</span>
                        </div>
                    </div>
                    <div class="number">
                        <select id="select">
                            <option value="1"> 1</option>
                            <option value="5"> 5</option>
                            <option value="10"> 10</option>
                            <option value="15"> 15</option>
                            <option value="20"> 20</option>
                        </select>
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                        <span>场</span>
                    </div>
                    <div class="allPrice">
                        <span class="all">合计</span>
                        <span class="price">￥1000</span>
                    </div>
                </div>
                <div id="brand" style="display: -webkit-flex;-webkit-justify-content: space-between;-webkit-align-items: center;">
                    <span>需品牌方邀约客户：</span>
                    <div class="danjia">单价
                        <input type="text" id="danjia" value="0" style="width:40px;text-align: center;" />
                    </div>
                    ×
                    <div>
                        <input type="text" id="renshu" value="0" style="width:40px;text-align: center;" />位</div>
                </div>
                <ul class="cont">
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">品牌产品展示(简单植入原内容,以高质量的体验主动获得核心用户关注)</span>
                        </div>
                    </li>
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">一场若干人的体验活动</span>
                        </div>
                    </li>
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">根据intable要求拍摄现场照片(每场环境图/产品图/活动细节图/互动图各10张)</span>
                        </div>
                    </li>
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">体验导师KOL撰写深度体验帖(1篇／5场)</span>
                        </div>
                    </li>
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">申请intable体验员撰写深度体验帖(需提供至少一场活动的免费体验位置)</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="box2">
                <div class="base">
                    <div class="list">
                        <div class="pick" pick="none">
                            <input type="checkbox" ck="0" pick="pick">
                            <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                        </div>
                        <div style="background-image: url(./icon/icon2.png)" class="tit">
                            <span>内容策划+主题策划</span>
                        </div>
                    </div>
                    <div class="allPrice">
                        <span class="all">合计</span>
                        <span class="price">￥2000</span>
                    </div>
                </div>
                <ul class="cont">
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">根据intable要求结合原有体验内容设计产品植入形式,以充分体现产品特点,并现场引导来宾互动体验</span>
                        </div>
                    </li>
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">根据品牌需求,在intable协助下定制至少3个主题供品牌选择</span>
                        </div>
                    </li>
                    <li>
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">KOL进行现场主题阐述</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- intable 秀 -->
            <!-- intable 秀 -->
            <!-- intable 秀 -->
            <div style="padding-top: 20px" class="intable">
                <div class="pick zong">
                    <input type="checkbox" ck="0">
                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                </div>
                <span>intable 秀</span>
            </div>
            <div class="box3">
                <ul class="pickPerson" style="position: relative;padding-bottom: 10px;">
                    <li>
                        <div class="mes">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>配合intable现场视频及图片拍摄(体现氛围及品牌理念)
                        </div>
                        <div style="position: absolute;bottom: 0;right: 0;" class="allPrice">
                            <span style="color: red" class="all">用于体验点传播</span>
                            <span style="display: none;" class="price">￥0</span>
                        </div>
                    </li>
                    <li class="extraPick">
                        <div class="mes">
                            <div class="pick" pick="none">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>短视频:10-15秒/条,共4-6条;或1分钟视频;或3分钟视频
                        </div>
                    </li>
                </ul>
            </div>
            <!--  intable 课程  -->
            <!--  intable 课程  -->
            <!--  intable 课程  -->
            <div style="padding-top: 20px" class="intable">
                <div class="pick zong">
                    <input type="checkbox" ck="0">
                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                </div>
                <span>intable 课</span>
            </div>
            <div class="box3">
                <ul class="pickPerson" style="position: relative;padding-bottom: 30px;">
                    <li>
                        <div class="mes">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>配合intable全程课程视频录制(45分钟－1个小时),intable负责拍摄剪辑对接网络平台播放
                        </div>
                        <div style="position: absolute;bottom: 0;right: 0;" class="allPrice">
                            <!-- <span class="all">合计</span> -->
                            <span style="display: none;" class="price">￥0</span>
                        </div>
                    </li>
                    <li>
                        <div class="mes">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>网络课堂收益
                        </div>
                        <div style="position: absolute;bottom: 0;right: 0;" class="allPrice">
                            <span style="color: red" style="" class="all">10%播放收益</span>
                            <span style="display: none;" class="price">￥0</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- intable 说 -->
            <!-- intable 说 -->
            <!-- intable 说 -->
            <div style="padding-top: 20px" class="intable">
                <div class="pick zong">
                    <input type="checkbox" ck="0">
                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                </div>
                <span>intable 说</span>
            </div>
            <div class="box3">
                <ul class="pickPerson" style="position: relative;padding-bottom: 30px;">
                    <li>
                        <div class="mes">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>KOL话题策划及引导来宾互动环节(品牌设定或KOL提供互动话题)
                        </div>
                        <div style="position: absolute;bottom: 0;right: 0;" class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">￥1000</span>
                        </div>
                    </li>
                    <li class="extraPick">
                        <div class="mes">
                            <div class="pick" pick="none">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>intable负责现场素材采集并形成社交媒体热门话题
                        </div>
                    </li>
                    <li class="extraPick">
                        <div class="mes">
                            <div class="pick" pick="none">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>该环节可用于网络直播
                        </div>
                    </li>
                </ul>
            </div>
            <!-- intable 传播 -->
            <!-- intable 传播 -->
            <!-- intable 传播 -->
            <div style="padding-top: 20px" class="intable">
                <div class="pick zong">
                    <input type="checkbox" ck="0">
                    <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                </div>
                <span>intable 传播</span>
            </div>
            <div class="box3">
                <ul class="pickPerson" style="position: relative;padding-bottom: 30px;">
                    <li>
                        <div class="mes">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck="0" pick="pick">
                                <i class="fa fa-check" aria-hidden="true" style="display: none;"></i>
                            </div>KOL自媒体发布(需标明发布价格,intable提供参考价)
                        </div>
                        <div style="position: absolute;bottom: 0;right: 0;" class="allPrice">
                            <span style="color: red" class="all"></span>
                            <span style="display: none;" class="price">￥0</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 基本信息 -->
            <!-- 基本信息 -->
            <div style="padding-top: 20px" class="intable">
                <span>体验店基本信息</span>
            </div>
            <div class="box3">
                <ul class="pickPerson" style="position: relative;padding-bottom: 10px;">
                    <li>
                        <div class="mes">
                            店 名:
                            <input type="text" value="">
                        </div>
                    </li>
                    <li>
                        <div class="mes">
                            地 址:
                            <input type="text" value="">
                        </div>
                    </li>
                    <li>
                        <div class="mes">
                            联系人:
                            <input type="text" value="">
                        </div>
                    </li>
                    <li>
                        <div class="mes">
                            电 话:
                            <input type="text" value="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="computed">
            <div class="list1">
                <span>总计：</span>
                <span style="color: red" id="total">￥5000</span>
            </div>
            <input type="submit" value="提交" class="sub">
        </div>
        <!-- </form> -->
    </div>
    <script>
    //每场价格
    var basePrice = 200;
    var arr = [];
    //给大栏目 加class
    for (var n = 0; n < $('.zong').length; n++) {
        if (n == 0) {
            $('.zong').eq(n).find('input[type=checkbox]').addClass('tot0');
        } else {
            $('.zong').eq(n).find('input[type=checkbox]').addClass('tot');
        }

    }
    //总场数价格
    var changePrice = 0;
    changePrice = $('#select').val();
    $('.allPrice').eq(0).find('.price').html('￥' + changePrice * 1000)
        //下拉框的变化
    $('#select').change(function() {
        changePrice = $('#select').val();
        $('.allPrice').eq(0).find('.price').html('￥' + changePrice * 1000);
        var zj = compute();
        $('#total').html('￥' + zj)
    });

    var tps = $('input[type=checkbox]');
    for (var i = 0; i < tps.length; i++) {
        arr.push(tps.eq(i));
    }
    //找到后面没有价格的input
    tps.change(function() {
        if ($(this).hasClass('tot')) {
            if ($(this).attr('ck') == 0) {
                $(this).parents('.intable').next().find('input[type=checkbox]').attr('ck', 1);
                $(this).parents('.intable').next().find('i').show();
            } else {
                $(this).parents('.intable').next().find('input[type=checkbox]').attr('ck', 0);
                $(this).parents('.intable').next().find('i').hide();
            }
        } else if ($(this).hasClass('tot0')) {
            if ($(this).attr('ck') == 0) {
                tps.eq(1).attr('ck', 1);
                tps.eq(1).next().show();
            } else {
                tps.eq(1).attr('ck', 0);
                tps.eq(1).next().hide();
            }
        }
        if ($(this).attr('ck') == 0) {
            $(this).attr('ck', 1);
            $(this).next().show();
            if ($(this).parent().parent().parent().next().hasClass('extraPick')) {
                $(this).parent().parent().parent().next().find('i').show();
            }
        } else {
            $(this).next().hide()
            $(this).attr('ck', 0);
            if ($(this).parent().parent().parent().next().hasClass('extraPick')) {
                $(this).parent().parent().parent().next().find('i').hide();
            }
        }
        var zj = compute();
        $('#total').html('￥' + zj)
    })

    function compute() {
        var total = 0;
        for (var n = 0; n < tps.length; n++) {
            if (tps.eq(n).attr('ck') == 1 && tps.eq(n).attr('pick') == 'pick') {

                var num = tps.eq(n).parent().parent().parent().find('.allPrice .price').html();
                if (num == '待定') {
                    num = 0;
                    total += parseFloat(num);
                } else {
                    console.log(num)
                    num = num.substring(1);
                    total += parseFloat(num);
                }

            }

        }

        return total;
    }
    var danjia = 0
    var numbers = 0
    $('#renshu').change(function() {
        numbers = parseFloat($(this).val())
        add()
    })
    $('#danjia').change(function() {
        danjia = parseFloat($(this).val())
        add()
    })

    function add() {
        var money = danjia * numbers + compute()
        $('#total').html('￥' + money)
    }
    //  inp.eq(0).change(function() {
    //      if ($(this).attr('ck') == 0) {
    //          for (var b = 0; b < 2; b++) {
    //              inp.eq(b).attr('ck', 1);
    //              inp.eq(b).next().show()
    //          }
    //      } else {
    //          for (var b = 0; b < 2; b++) {
    //              inp.eq(b).attr('ck', 0);
    //              inp.eq(b).next().hide()
    //          }
    //      }
    //
    //      compute();
    //  })
    //  inp.eq(14).change(function() {
    //      if ($(this).attr('ck') == 0) {
    //          for (var b = 14; b < 17; b++) {
    //              inp.eq(b).attr('ck', 1);
    //              // inp.eq(b).next().show()
    //
    //          }
    //      } else {
    //          for (var b = 15; b < 17; b++) {
    //              inp.eq(b).attr('ck', 0);
    //              // inp.eq(b).next().hide()
    //          }
    //      }
    //      compute();
    //  })


    //变化时价格总计
    //  function compute() {
    //      var total = 0;
    //
    //      for (var k = 0; k < inp.length; k++) {
    //          if (k == 0) {
    //
    //          } else if (k == 1 || k == 5 || k == 6 || k == 7) {
    //              if (inp.eq(k).attr('ck') == 1) {
    //                  var tmp = inp.eq(k).parents('.base').find('.price').html();
    //                  tmp = tmp.substring(1)
    //                  total += parseFloat(tmp)
    //              }
    //          } else if (k == 3 || k == 9 || k == 14 || k == 17 || k == 18 || k == 19 || k == 20 || k == 21) {
    //
    //          } else {
    //              if (inp.eq(k).attr('ck') == 1) {
    //                  var tmp = inp.eq(k).parents('li').find('.price').html();
    //                  tmp = tmp.substring(1)
    //                  total += parseFloat(tmp)
    //              }
    //          }
    //
    //
    //      };
    //      console.log(total)
    //      $('#total').html('￥' + total);
    //  }
    //单选框的变化
    // $('.pick').find('i').hide();
    //  for (var m = 0; m < inp.length; m++) {
    //      if (m > 0) {
    //          inp.eq(m).change(function() {
    //              if ($(this).attr('ck') == 0) {
    //                  $(this).attr('ck', 1);
    //                  $(this).next().show()
    //              } else {
    //                  $(this).next().hide()
    //                  $(this).attr('ck', 0);
    //              }
    //              compute()
    //          })
    //      }
    //  }
    </script>
    <script>
    autosize(document.querySelectorAll('textarea'));
    </script>
</body>

</html>
